﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../static/css/cloud-admin.css" >
	<link href="../../static/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link href="../../static/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
	<link rel="stylesheet" type="text/css" href="../../static/css/iotxstyle.css" >
</head>
<body>
<!-- PAGE -->
<section>
	<!-- welcome -->
				<div class="col-md-4 col-md-offset-4">
					<div class="welcome-box-plain">
						<div class="guide">
							<div class="step-img">
								<div class="step-first" >
									<img src="../../static/img/step-1.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-2.png">
								</div>
								<div class="step-second" >
									<img src="../../static/img/step-12.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-2.png">
								</div>
								<div class="step-third" >
									<img src="../../static/img/step-13.png">
								</div>
								<div class="step-arrow">
									<img src="../../static/img/arrow-2.png">
								</div>
								<div class="step-forth" >
									<img src="../../static/img/step-14.png">
								</div>
							</div>
							<div class="stepdetail">
								<div class="stepdetail-one">
									Network Connection
								</div>
								<div class="stepdetail-two">
									User Information
								</div>
								<div class="stepdetail-three">
									Server Settings
								</div>
								<div class="stepdetail-four">
									Dusts Settings
								</div>
							</div>
							<div class="step-title">
								<div class="steptitle-one">
									Step 1
								</div>
								<div class="steptitle-two">
									Step 2
								</div>
								<div class="steptitle-three">
									Step 3
								</div>
								<div class="steptitle-four">
									Step 4
								</div>
							</div>
							<div class="step-line">
								<img src="../../static/img/step-line.png" style="width: 97%">
							</div>
						</div>
							<div class="connect">
								<div class="dustguide">
									<div class="dust-title">
										Dusts
									</div>
									<div class="dust-second">
										(Please  select  to  connected)
									</div>
									<button class="dust-connect-button" id="connectMulti">
										Connect
									</button>
									<button class="reset-button">
										Reset
									</button>
								</div>
                                <div class="col-lg-12" style="width:90%;margin-left:5%;margin-top:1%">
                                    <table id="dustTable" style="width: 90%;margin: 0px auto;"></table>

                                </div>

							</div>

							<div class="next">
								<button id="skipbutton" class="upbutton">SKIP</button>
								<button id="upbutton" class="upbutton">PREVIOUS</button>
								<button id="nextbutton" class="nextbutton">NEXT</button>
							</div>

					</div>
				</div>
	<!--/welcome -->
</section>
<!--/PAGE -->
<!-- JAVASCRIPTS -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- JQUERY -->
<script src="../../static/js/jquery-2.0.3.min.js"></script>
<!-- JQUERY UI-->
<script src="../../static/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<!-- BOOTSTRAP -->
<script src="../../static/bootstrap-dist/js/bootstrap.min.js"></script>
<!-- DATATABLE -->
<script src="../../static/js/jquery.dataTables.min.js"></script>
<script src="../../static/js/dataTables.bootstrap.js"></script>
<!-- CUSTOM SCRIPT -->
<script src="../../static/js/script.js"></script>
<script>
    var dustConnect = function (id) {
        var post_data = null;
        var tableRows = $('#dustTable').dataTable().fnGetData();
        for(var i=0;i<tableRows.length;i++){
            if(tableRows[i]['id']==id){
                post_data = tableRows[i];
                break;
            }
        }
        connectAjax([post_data]);
        };
    var getCheckedDust = function(){
         var checkedArr = [];
         var tableRows = $('#dustTable').dataTable().fnGetNodes();
         for(var i=0;i<tableRows.length;i++){
            if($(tableRows[i]).find('input[type="checkbox"]').prop("checked")){
                checkedArr.push($('#dustTable').dataTable().fnGetData($(tableRows[i])));
            }
        }
        return checkedArr;
    };
    //多选框连接微尘
    var connectMulti = function () {
        var data = getCheckedDust();
        if(!data || data.length==0){
            alert("At least check one row!");
        }else{
            connectAjax(data);
        }

    };
    var connectAjax = function (post_data) {
        if(!post_data || post_data.length==0){
            return ;
        }
        $.ajax({
              type: 'POST',
              url: '/weichen/dustConnect',
              data: JSON.stringify(post_data),
              contentType:'application/json',
              dataType: 'JSON',
              success: function(result){
                  if(result.status == 0){
                  }else{
                  }
                  }
               });

    }

    jQuery(document).ready(function() {
		$('#upbutton').click(function(){
			window.location.href='/guide/settingup';
		});
        $('#nextbutton').click(function(){
            window.location.href='/guide/end';
        });
        $('#skipbutton').click(function(){
            window.location.href='/guide/end';
        });
        //连接多个微尘
        $("#connectMulti").click(function(){
            connectMulti();
        });
        //functions




        //init table
        $('#dustTable').dataTable({
			serverSide:true,
            processing: false,
            searching:false,
            paging: false,
            pagingType:   "full_numbers",
			ordering:false,
            bLengthChange:false,
            showNEntries: false,
            scrollCollapse: true,
            bInfo : false,
            destroy:true,
			language: {
			  emptyTable: "no data,please try again"
			},
           ajax: {
                url:"/weichen/dustTable",
                type:"POST",
                contentType : "application/json",
                data: function ( d ) {
                var draw = d['draw'];
                var post_data = {
                };
                //添加额外的参数传给服务器
                return JSON.stringify(post_data);
                }
            },
            columns: [
                 {
                 "sClass": "text-center",
                 "data": "id",
                 "render": function (data, type, full, meta) {
                     return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                 },
                 "bSortable": false
             },
                { "title":"ID","data": "id"},
                { "title":"Type","data": "type"},
                { "title":"Power","data": "power"}
            ],
             columnDefs:[ {
                targets: 3,
                render: function (data, type, row, meta) {
                    var innerHtml = "disconnect";
                    if(!row.status){
                       innerHtml = "connect"
                    }
                    return '<a type="button" class="" href="#" onclick=dustConnect(' + row.id.toString() +') >'+innerHtml+'</a>' ;}
            },
                { "orderable": false, "targets": 3 }
            ],

            fnDrawCallback:function(){
            }
        });


    });
</script>

</body>
</html>